import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';

import { itemExtraDefaultProps } from './defaultProps';
import type { ItemExtraOptions } from './type';

export interface ItemExtraProps extends ItemExtraOptions, HTMLAttributes<HTMLDivElement> {}

const ItemExtra: FC<ItemExtraProps> = (props) => {
  const { className, children, forwardedRef, ...itemExtraProps } = props;

  return createElement(
    'div',
    { ref: forwardedRef, className: classNames('extra', className), ...itemExtraProps },
    children,
  );
};

ItemExtra.displayName = 'ItemExtra';
ItemExtra.defaultProps = itemExtraDefaultProps;

export default ItemExtra;
